<template>
<div class="ten" ref="ten">
    <div class="title">
        我们每天都在进步
    </div>
    <div class="container">
        <div class="one">
            <img src="@/assets/photo/ten1.png" alt="">
            <div class="content">
                上海咚安智能科技有限公司积聚一群富有想象力， 富有激情的年轻IT同学，在几位实验室管理研究的行业专家的带领下 ，一直在不断努力创新。 我们坚持“专业、简易、实用、服务”的产品原则 ，实行小步快跑，快速迭代的研发路线， 打造了一套匹配有行业新技术及信息化运营策略的创新产品——咚安实验室运营管理系统。
            </div>
        </div>
        <div class="two">
            <div class="title">
                联系我们
            </div>
            <div class="number">
                175 2120 0665
            </div>
            <div class="number">
                156 1850 0502
            </div>
            <div class="img_list">
                <img src="@/assets/photo/_ten2.png" alt="">
                <img src="@/assets/photo/_ten3.png" alt="">
            </div>
            <div class="other">
                <div class="item">
                    上海咚安智能科技有限公司
                </div>
                <div class="item">
                    电话：021-6142 6798
                </div>
                <div class="item">
                    邮箱：service@donganyun.com
                </div>
                <div class="item">
                    地址：上海市杨浦区齐齐哈尔路920号7号101室
                </div>
            </div>
        </div>
        <div class="three">
            <div class="title">
                微信公众号
            </div>
            <img src="@/assets/photo/ten4.jpg" alt="">
        </div>
    </div>
</div>
</template>

<script>
import {start_to_end} from '@/assets/tools/public_tools';
export default {
    name: 'Ten',
    props:{
        back_top:{
            type:Boolean,
            default:false,
        },
    },
    watch:{
        back_top(){
            if(this.back_top){
                this.on_back_top();
            }
        },
    },
    methods:{
        on_back_top(){
            let _top = document.documentElement.scrollTop + this.$refs.ten.getBoundingClientRect().top - 85;
            start_to_end(document.documentElement.scrollTop,_top-10,300);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ten{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items:center;
    box-sizing: border-box;
    >.title{
        text-align: center;
        margin-bottom: 60px;
        font-size: 32px;
        font-weight: 600;
        line-height: 100%;
    }
    >.container{
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-gap: 30px;
        >.one{
            text-align: left;
            img{
                border-radius: 5px;
            }
            >.content{
                font-size: 14px;
                margin-top: 15px;
                line-height: 23px;
            }
        }
        >.two{
            text-align: left;
            >.title{
                font-size:20px;
                font-weight: bold;
                margin-bottom: 30px;
                line-height: 100%;
            }
            >.number{
                font-size: 24px;
                margin-bottom: 20px;
            }
            >.img_list{
                display: flex;
                justify-content: space-between;
                width: fit-content;
                img{
                    margin-right: 15px;
                    width: 50px;
                }
            }
            >.other{
                margin-top: 20px;
                >.item{
                    margin-bottom: 10px;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        }
        >.three{
            >.title{
                font-size:20px;
                font-weight: bold;
                margin-bottom: 20px;
                line-height: 100%;
            }
        }
    }
}
</style>
